<template>
  <!-- 列表封装组件 -->

  <div class="tabelFrom">
    <!-- 检索 -->
    <search v-if="formData.showSearch">
      <template slot="searchButton">
        <!-- 定义插槽，可用来添加检索右侧按钮 -->
        <slot name="searchButton" />
      </template>
    </search>

    <!-- 数据列表头 新增/批量删除 -->
    <data-list-header v-if="formData.showDataListHeader" :form-data="formData">
      <template slot="dataListHeaderButton">
        <slot name="dataListHeaderButton" />
      </template>
    </data-list-header>

    <!-- 表格 -->
    <div class="form-list">
      <slot name="formList" />
    </div>

    <!-- 分页组件 -->
    <data-pagination v-if="formData.showPagination" :form-data="formData" @setPage="_setPage" @setSize="_setSize">
      <!-- 11 -->
    </data-pagination>
  </div>
</template>

<script>
// 搜索组件
import Search from './tabelFromSearch.vue'
// 列表头部的数据说明头
import DataListHeader from './dataListHeader.vue'
// 分页组件
import DataPagination from './DataPagination.vue'
export default {
  name: 'TabelFrom',
  components: {
    Search,
    DataListHeader,
    DataPagination
  },
  props: {
    // 页面数据
    pageData: {
      type: Object,
      default: null
    },
    // 请求数据列表地址
    requestUrl: {
      type: String,
      default: null
    },
    // 数据列表的数据字段名称
    dataField: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 页面数据
      formData: {}
    }
  },
  mounted() {
    // 将传递过来的页面数据 pageData 进行赋值给 formData
    this.formData = this.pageData

    console.log('请求数据地址：', this.requestUrl)
    this._listData() // 调用列表数据请求
  },
  methods: {
    // 列表数据请求
    _listData: async function() {
      const params = {
        generalQuery: this.formData.generalQuery
      }
      console.log(params, 222)
      /**
       * this.requestUrl    调用组件时父组件传递过来的的请求接口地址
       * params   请求需要携带的参数
       */
      const res = await this.$api.public.example(this.requestUrl, params)
      console.log(res, '列表数据')

      // 数据请求成功后将 loading 加载取消
      this.formData.listLoading = false

      // 将请求的列表数据进行重新赋值 (传递给子组件显示)
      console.log(this.dataField, '数据字段')
      this.formData.tableData = res[this.dataField]

      // 将请求的数据总数进行赋值 (传递给子组件显示)
      this.formData.total = res.paging.total
      console.log(this.formData, '页面数据')
    },

    // 分页子组件传递过来的数据，进行设置
    _setSize(size) {
      this.formData.generalQuery.size = size // 设置每页条数
      this._listData() // 调用列表数据请求
    },

    _setPage(page) {
      this.formData.generalQuery.page = page // 设置当前页数
      this._listData() // 调用列表数据请求
    }
  }
}
</script>

<style lang='scss' scoped>
</style>
